$(document).ready(function() {
	var baseColor = "#494949";
	var background = "#000";
	var highlightColor = "#F90";
	var textColor = "#2C2C2C";
	var imgContent= "images/paper.png";
	updateBackground(null,false);
	var patterns = {
		Paper: {
			name: "Paper", 
			img: "images/paper.png"
		}, 
		Blueprint: {
			name: "Blueprint", 
			img: "images/blueprint.png"
		}, 
		Bricks: {
			name: "Bricks", 
			img: "images/bricks.png"
		}, 
		Carbon: {
			name: "Carbon", 
			img: "images/carbon.png"
		}, 
		Circuit: {
			name: "Circuit", 
			img: "images/circuit.png"
		}, 
		Holes: {
			name: "Holes", 
			img: "images/holes.png"
		}, 
		Mozaic: {
			name: "Mozaic", 
			img: "images/mozaic.png"
		}, 
		Roof: {
			name: "Roof", 
			img: "images/roof.png"
		}, 
		Stripes: {
			name: "Stripes", 
			img: "images/stripes.png"
		}
	};
	
	var presets = {
		Default: {
			name: "Default", 		
			baseColor: "494949",
			background: "000",
			highlightColor: "F90",
			textColor: "2C2C2C"			
		}, 
		Autumn: {
			name: "Autumn", 
			baseColor: "363d1b",
			background : "756411",
			highlightColor: "947131",
			textColor : "ffb575"
		}, 
		Winter: {
			name: "Winter", 
			baseColor :"bababa",
			background: "fff",
			highlightColor: "808080",
			textColor: "fff"
		}, 
		Hot: {
			name: "Hot", 
			baseColor :"4f1b1b",
			background: "ff3714",
			highlightColor: "e8cb10",
			textColor:"f7ff00"
		}, 
		Sea: {
			name: "Sea", 		
			baseColor: "192a54",
			background :"0d0070",
			highlightColor: "88a9eb",
			textColor: "8affe2"
		}
	};
	
	var backgroundTargets = 
	[
		"body"
	];
	var backgroundContents = 
	[
		"#content"
	];
	var baseColorTargets = 
	[
		"div#head", 
	 	"div.bg-sidebar",
	 	"div#content .bloc .title",
	 	"div#footer",
		"ul.accordion > li > a"		

	];
	
	var borderColorTargets = 
	[
	 	"div#head"
	
	];
	
	var highlightColorTargets = 
	[
		"div#head",
		"div#footer",
		"div.bg-sidebar"
	];
	
	var textTargets = 
	[
		"div#content .bloc .title",
		"div#head a",
		"div#footer p"
	];
	
	$("#themer-getcss").bind("click", function(event) {
		//$("#themer-css-dialog textarea").val(generateCSS("../"));
		//$("#themer-css-dialog").dialog("open");
		$("#viewCSS").val(generateCSS("../"));
		$("#viewCSS").css('height','300px');
		event.preventDefault();
	});
	
	var presetDd = $('<select id="theme-presets"></select>');
	for(var i in presets) {
		var option = $("<option></option>").text(presets[i].name).val(i);
		presetDd.append(option);
	}
	$("#theme-presets-container").append(presetDd);
	
	presetDd.bind('change', function(event) {	
		updateBaseColor(presets[presetDd.val()].baseColor);
		updateHeighlightColor(presets[presetDd.val()].highlightColor);
		updateTextColor(presets[presetDd.val()].textColor);		
		updateBackgroundColor(presets[presetDd.val()].background)
		
		event.preventDefault();
	});
	
	
	var patternDd = $('<select id="theme-patterns"></select>');
	for(var i in patterns) {
		var option = $("<option></option>").text(patterns[i].name).val(i);
		patternDd.append(option);
	}
	$("#theme-pattern-container").append(patternDd);
	
	patternDd.bind('change', function(event) {
		updateBackground(patterns[patternDd.val()].img, true);		
		event.preventDefault();
	});
	
	$("div#themer #themer-toggle").bind("click", function(event) {
		if($(this).hasClass("opened")) {
			$(this).toggleClass("opened").parent().animate({right: "0"}, "slow");
		} else {
			$(this).toggleClass("opened").parent().animate({right: "256"}, "slow");
		}
	});
	
	$("div#themer #textglow-op").slider({
		range: "min", 
		min:0, 
		max: 100, 
		value: 50, 
		slide: function(event, ui) {
			alpha = ui.value * 1.0 / 100.0;
			updateTextGlowColor(null, alpha);
		}
	});
	
	$("div#themer #themer-css-dialog").dialog({
		autoOpen: false, 
		title: "Theme CSS", 
		width: 500, 
		modal: true, 
		resize: false, 
		buttons: {
			"Close": function() { $(this).dialog("close"); }
		}
	});
	
	$("#base-cp").ColorPicker({
		color: baseColor, 
		onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
		},
		onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
		},
		onChange: function (hsb, hex, rgb) {			
			updateBaseColor(hex, true);
		}
	});
	
	$("#highlight-cp").ColorPicker({
		color: highlightColor, 
		onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
		},
		onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
		},
		onChange: function (hsb, hex, rgb) {			
			updateHeighlightColor(hex, true);
		}
	});
	$("#Background-cp").ColorPicker({
		color: background, 
		onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
		},
		onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
		},
		onChange: function (hsb, hex, rgb) {			
			updateBackgroundColor(hex, true);
		}
	});
	
	$("#text-cp").ColorPicker({
		color: textColor, 
		onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
		},
		onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
		},
		onChange: function (hsb, hex, rgb) {			
			updateTextColor(hex, true);
		}
	});

	function updateBackground(_url, _pattern)
	{
		if(!_pattern)
		{
			$("#text-cp").css('background-color',textColor);
			$("#Background-cp").css('background-color',background);
			$("#highlight-cp").css('background-color',highlightColor);
			$("#base-cp").css('background-color',baseColor);
		}
		else
		{
			//backgroundContents
			imgContent = _url;
			jQuery.each(backgroundContents,function(i, val) {
				//$(val).css('background-image', '"'+imgContent+'"');
				$(val).css("background","url("+imgContent+")");
			});
			
		}
				
	}
	
	function updateBaseColor(hex, attach)
	{
		baseColor = "#" + hex;
		$("#base-cp").css('backgroundColor', baseColor);
		jQuery.each(baseColorTargets,function(i, val) {
			$(val).css('backgroundColor', baseColor);
		});
		if(attach === true)
			attachStylesheet();
	}
	function updateHeighlightColor(hex, attach)
	{
		highlightColor = "#" + hex;
		$("#highlight-cp").css('backgroundColor', highlightColor);
		jQuery.each(highlightColorTargets,function(i, val) {
			$(val).css('border-color', highlightColor);
		});
		if(attach === true)
			attachStylesheet();
	}
	
	function updateBackgroundColor(hex, attach)
		{
		background = "#" + hex;
		$("#Background-cp").css('backgroundColor', background);	
		$("body").css('backgroundColor', background);	
	}
	
	function updateTextColor(hex, attach)
	{
		textColor = "#" + hex;
		$("#text-cp").css('backgroundColor', textColor);
		jQuery.each(textTargets,function(i, val) {
			$(val).css('color', textColor);
		});
		if(attach === true)
			attachStylesheet();
	}
	
	function updateTextGlowColor(rgb, alpha, attach)
	{
		if(rgb != null) {
			textGlowColor.r = rgb["r"];
			textGlowColor.g = rgb["g"];
			textGlowColor.b = rgb["b"];
			textGlowColor.a = alpha;
		} else {
			textGlowColor.a = alpha;
		}
		
		$("div#themer #textglow-op").slider("value", textGlowColor.a * 100);
		$("#textglow-cp").css('backgroundColor', '#' + rgbToHex(textGlowColor.r, textGlowColor.g, textGlowColor.b));
		
		if(attach === true)
			attachStylesheet();
	}
	
	function attachStylesheet(basePath)
	{
		//if($("#stylesheet-holder").size() == 0) {
		//	$('body').append('<div id="stylesheet-holder"></div>');
		//}
		
	//	$("#stylesheet-holder").html($('<style type="text/css">' + generateCSS(basePath) + '</style>'));
	}
	
	function generateCSS(basePath)
	{
		if(!basePath)
			basePath = "";
			
		var css = 
			backgroundTargets.join(", \n") + "\n" + 
			"{\n"+
			"background-color:" + background + ";\n"+
			"}\n\n"+	
			backgroundContents.join(", \n") + "\n" + 
			"{\n"+
			"background-image:url(" + imgContent + ");\n"+
			"}\n\n"+			
			baseColorTargets.join(", \n") + "\n" + 
			"{\n"+
			"background-color:" + baseColor + ";\n"+
			"}\n\n"+
			textTargets.join(", \n") + "\n" + 
			"{\n"+
			"color:" + textColor + ";\n"+
			"}\n";		
			highlightColorTargets.join(", \n") + "\n" + 
			"{\n"+
			"border-color:" + highlightColor + ";\n"+
			"}\n";
			
			
		return css;
	}
	
	
	function rgbToHex(r, g, b)
	{
		var rgb = b | (g << 8) | (r << 16);
		return rgb.toString(16);
	}
});